<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<script src="/BookStoreManager/js/bootstrap.min.js"></script>
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/pintuer.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/admin.css">
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/pintuer.js"></script>


<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/index.js "></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/index.css"></link>
<script type="text/javascript">
	function searchBook() {
		var bookType = $(".bookType").val();
		var bookName = $(".bookName").val();
		if (bookName == "") {
			alert("搜索条件不能为空");
		} else {
			$
					.ajax({
						type : "POST",
						data : {
							"bookName" : bookName,
							"bookType" : bookType
						},
						url : "${pageContext.request.contextPath}/searchBookByName",
						success : function(data) {
							$(".searchResult").empty();
							if (data.length == 0) {
								alert("搜索结果为空");
								$(".searchResult").css("display", "none");
							} else {
								var header = "<tr><th>书名</th><th>作者</th><th>剩余</th><th>类别</th><th>操作</th></tr>";
								$(".searchResult").append(header);
								for (var i = 0; i < data.length; i++) {
									$(".searchResult").css("display",
											"inline-table");
									var book = "<tr><td>"
											+ data[i].bookName
											+ "</td><td>"
											+ data[i].author
											+ "</td><td>"
											+ data[i].bookRemain
											+ "</td><td>"
											+ data[i].bookType
											+ "</td><td><a onclick='borrowBook("
											+ data[i].bookId
											+ ")'>借书</a>&nbsp;&nbsp;<a onclick='alert(\""
											+ data[i].introduce
											+ "\")'>简介</a></td></tr>";
									$(".searchResult").append(book);
								}
							}
						}
					});
		}
		return false;
	}

	function viewIntroduce(data) {
		alert(data);
	}

	function borrowBook(bookId) {
		$.ajax({
			type : "POST",
			url : "${pageContext.request.contextPath}/reader/borrowBook",
			data : {
				"bookId" : bookId
			},
			success : function(data) {
				if (data.result == "该书籍你已经借阅过") {
					alert("该书籍你已经借阅过");
				} else if (data.result == "借阅成功") {
					alert("借阅成功");
				} else if (data.result == "借阅失败") {
					alert("借阅失败");
				} else if (data.result == "当前用户不是读者") {
					alert("当前用户不是读者");
				} else if (data.result == "该书籍已经被借完") {
					alert("该书籍已经被借完");
				} else if (data.result == "还没有登录") {
					alert("请先登录");
				}
			}
		})
	}
</script>
</head>
<body class="index_body">

	<div class="row clearPadding">
		<div class="col-lg-12" style="padding: 10px;">
			<img alt="#"
				src="${pageContext.request.contextPath}/images/indexheader.png"
				style="display: block; margin: 0 auto; height: 100px;">
		</div>
	</div>
	<div class="row"
		style="background-color: rgb(255, 255, 255); padding: 3px; margin: 225px; margin-top: 7px; margin-bottom: 7px; border-radius: 5px; border-width: 1px;">
		<div class="col-md-6 col-md-offset-3" style="height: 40px;">
			<ul class="nav nav-pills">
				<li><a
					href="${pageContext.request.contextPath}/enterBookStoreBriefIntroduce"
					style="color: rgb(0, 0, 0); font-family: cursive;"><strong>图书馆简介</strong></a></li>

				<li><a href="${pageContext.request.contextPath}/jsp/reader.jsp"
					style="color: rgb(0, 0, 0); font-family: cursive;"><strong>我的图书馆</strong></a></li>
				<li><a href="${pageContext.request.contextPath}/enterAdmin"
					style="color: rgb(0, 0, 0); font-family: cursive;"><strong>后台信息管理</strong></a></li>
				<li><a href="${pageContext.request.contextPath}/enterTopic"
					style="color: rgb(0, 0, 0); font-family: cursive;"><strong>学习讨论</strong></a></li>	

			</ul>
		</div>
		<div class="col-md-2"
			style="height: 40px; padding-left: 1px; line-height: 40px;">
			<shiro:notAuthenticated>
				<a style="font-size: 15px; color: rgb(255, 80, 6);"
					href="${pageContext.request.contextPath}/jsp/login.jsp">请登录</a>
			</shiro:notAuthenticated>
			<shiro:authenticated>
				<span
					style="font-size: 15px; color: red; margin-right: 10px; position: relative;"><shiro:principal></shiro:principal></span>
				<a style="font-size: 15px; color: red; position: relative;"
					href="${pageContext.request.contextPath}/reader/loginout">注销</a>
			</shiro:authenticated>
		</div>
	</div>

	<div class="row">
		<div class="col-lg-8 col-md-offset-2" style="height: 250px;">
			<div id="myCarousel" class="carousel slide">
				<ol class="carousel-indicators">
					<c:forEach items="${indexImage}" var="img" varStatus="status">
						<!-- 轮播（Carousel）指标 -->
						<li data-target="#myCarousel" data-slide-to="${status.index}"
							class="active"></li>
					</c:forEach>
				</ol>


				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<c:forEach items="${indexImage}" var="img" varStatus="status">
						<c:if test="${status.index==0}">
							<div class="item active"
								style="width: 100%; height: 300px; overflow: hidden">
								<img src="${img.path}"
									style="max-width: 100%; _width: expression(this.width &amp; amp;"
									630px" : this.width); alt="First slide">
								<div class="carousel-caption">
									<c:out value="${img.description}"></c:out>
								</div>
							</div>
						</c:if>
						<c:if test="${status.index!=0}">
							<div class="item"
								style="width: 100%; height: 300px; overflow: hidden">
								<img src="${img.path}" style="max-width: 100%; height: auto;"Firstslide">
								<div class="carousel-caption">
									<c:out value="${img.description}"></c:out>
								</div>
							</div>

						</c:if>
					</c:forEach>
				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="carousel-control left" href="#myCarousel"
					data-slide="prev">&lsaquo; </a> <a class="carousel-control right"
					href="#myCarousel" data-slide="next">&rsaquo; </a>
			</div>
		</div>
	</div>
	<div class="row" style="margin-top: 60px; margin-bottom: 20px;">
		<div class="col-lg-5 col-md-offset-2"
			style="position: relative; left: 15px; height: 300px; border-width: 8px; margin-right: 30px; background-color: white; border-radius: 8px;">
			<p class="text-center"
				style="font-size: 23px; margin-top: 10px; font-weight: 500;"
				id="main_title">信息服务</p>

			<div class="form-group">

				<ul class="search" style="padding-left: 10px;">
					<li><label for="sitename">选择查询条件：</label> <select
						name="bookType" class="input bookType"
						style="width: 50px; line-height: 17px; display: inline-block">
							<option value="书名">书名</option>
							<option value="类别">类别</option>
							<option value="作者">作者</option>
					</select></li>
					<li><input type="text" placeholder="请输入查询条件" name="readerName"
						class="input titleinput bookName"
						style="width: 250px; line-height: 17px; display: inline-block" />
						<a class="button border-main  icon-search" onclick="searchBook()">
							搜索</a></li>
				</ul>
				<table class="table searchResult"
					style="margin: 0 auto; display: none; text-align: center;">
				</table>
			</div>

		</div>
		<div class="col-lg-3" id="smallNews"
			style="height: 300px; width: 300px; padding-top: 15px; border-width: 8px; background-color: white; border-radius: 8px;"></div>
	</div>


	<div class="row" style="background-color: rgb(112, 128, 144);"
		id="bottom">
		<div class="col-lg-8 col-md-offset-2">
			<p class="text-center"
				style="color: rgb(240, 240, 240); margin-top: 14px; font-size: 10px;">
				版权所有©五邑大学&nbsp;&nbsp; 地址：广东江门市东成村22号&nbsp;&nbsp;
				邮编：529020&nbsp;&nbsp; 五邑大学党政办：(0750)3296113&nbsp;&nbsp;
				传真：(0750)3358395&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				粤ICP备15096031号<a href="zszx.htm" target="_self">招生咨询</a>&nbsp;&nbsp;全日制本科招生咨询：(0750)3296263，3296265&nbsp;&nbsp;
				网络管理中心：(0750)3296114&nbsp;&nbsp; 校长信箱：<a
					href="mailto:wyuxfyx@126.com">wyuxfyx@126.com</a>&nbsp;&nbsp;
				信访专线：(0750)3296210
		</div>
		<div class="col-lg-2">
			<img src="${pageContext.request.contextPath}/images/bottom.png"
				width="50" height="50" border="0" style="margin-top: 5px;">
		</div>
	</div>




</body>
</html>